<template>
  <ContentWrap>
    <!-- 标签页 -->
    <div class="tabs-container">
      <div class="tabs-header">
        <div
          class="tab-item"
          :class="{ active: activeTab === 'purchase' }"
          @click="activeTab = 'purchase'"
        >
          付费购买记录
        </div>
        <div
          class="tab-item"
          :class="{ active: activeTab === 'watch' }"
          @click="activeTab = 'watch'"
        >
          课程观看记录
        </div>
      </div>

      <!-- 付费购买记录 -->
      <div v-if="activeTab === 'purchase'" class="tab-content">
        <div class="search-bar">
          <div class="search-item">
            <span class="label">购买人：</span>
            <el-input
              v-model="purchaseQuery.buyer"
              placeholder="请输入姓名/手机号码"
              clearable
              style="width: 220px"
            />
          </div>
          <div class="search-item">
            <span class="label">课程：</span>
            <el-select
              v-model="purchaseQuery.courseId"
              placeholder="请选择"
              clearable
              style="width: 220px"
            >
              <el-option
                v-for="item in courseOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <el-button type="primary" @click="searchPurchaseRecords">查询</el-button>
        </div>

        <!-- 付费购买记录表格 -->
        <el-table :data="purchaseRecords" border style="width: 100%">
          <el-table-column prop="payTime" label="支付时间" width="180" />
          <el-table-column prop="orderNo" label="订单编号" width="180" />
          <el-table-column prop="courseName" label="购买课程" min-width="200" />
          <el-table-column prop="buyer" label="购买人" width="150" />
          <el-table-column prop="amount" label="订单金额" width="120" align="right" />
        </el-table>

        <!-- 分页 -->
        <div class="pagination-container">
          <el-pagination
            v-model:current-page="purchaseQuery.page"
            v-model:page-size="purchaseQuery.pageSize"
            :page-sizes="[10, 20, 50, 100]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="purchaseTotalCount"
            @size-change="searchPurchaseRecords"
            @current-change="searchPurchaseRecords"
          />
        </div>
      </div>

      <!-- 课程观看记录 -->
      <div v-if="activeTab === 'watch'" class="tab-content">
        <div class="search-bar">
          <div class="search-item">
            <span class="label">查看人：</span>
            <el-input
              v-model="watchQuery.viewer"
              placeholder="请输入姓名/手机号码"
              clearable
              style="width: 220px"
            />
          </div>
          <div class="search-item">
            <span class="label">课程：</span>
            <el-select
              v-model="watchQuery.courseId"
              placeholder="请选择"
              clearable
              style="width: 220px"
            >
              <el-option
                v-for="item in courseOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <el-button type="primary" @click="searchWatchRecords">查询</el-button>
        </div>

        <!-- 课程观看记录表格 -->
        <el-table :data="watchRecords" border style="width: 100%">
          <el-table-column prop="viewer" label="查看人" width="150" />
          <el-table-column prop="lastWatchTime" label="最近查看时间" width="180" />
          <el-table-column prop="courseName" label="课程" min-width="200" />
          <el-table-column label="观看记录" width="120" align="center">
            <template #default="scope">
              <el-button type="text" @click="viewWatchDetail(scope.row)">
                查看记录
              </el-button>
            </template>
          </el-table-column>
          <el-table-column prop="amount" label="订单金额" width="120" align="right" />
        </el-table>

        <!-- 分页 -->
        <div class="pagination-container">
          <el-pagination
            v-model:current-page="watchQuery.page"
            v-model:page-size="watchQuery.pageSize"
            :page-sizes="[10, 20, 50, 100]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="watchTotalCount"
            @size-change="searchWatchRecords"
            @current-change="searchWatchRecords"
          />
        </div>
      </div>
    </div>

    <!-- 观看详情弹窗 -->
    <el-dialog
      v-model="watchDetailVisible"
      title="观看记录详情"
      width="700px"
    >
      <div class="watch-detail-header">
        <p>只要有账号观看课时就保存一条记录，每个课时只有一条记录</p>
      </div>
      <el-table :data="watchDetailRecords" border>
        <el-table-column prop="courseName" label="课程名称" min-width="150" />
        <el-table-column prop="time" label="课时" width="100" />
        <el-table-column prop="watchDuration" label="观看时长" width="100" align="center" />
        <el-table-column prop="watchCount" label="观看次数" width="100" align="center" />
        <el-table-column prop="lastWatchTime" label="最近观看时间" width="200" />
      </el-table>
    </el-dialog>
  </ContentWrap>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

defineOptions({ name: 'CourseOrder' })

// 当前激活的标签页
const activeTab = ref('purchase')

// 课程选项
const courseOptions = ref([
  { value: 1, label: '瑜伽初级课程' },
  { value: 2, label: '高级瑜伽进阶' },
  { value: 3, label: '冥想与放松' },
  { value: 4, label: '普拉提基础' }
])

// 付费购买记录相关
const purchaseQuery = reactive({
  buyer: '',
  courseId: undefined,
  page: 1,
  pageSize: 10
})

const purchaseRecords = ref([
  {
    id: 1,
    payTime: '2024-03-15 10:30:45',
    orderNo: 'DD202403150001',
    courseName: '瑜伽初级课程',
    buyer: '姓名/手机号码',
    amount: '10 积分'
  },
  {
    id: 2,
    payTime: '2024-03-16 14:22:18',
    orderNo: 'DD202403160002',
    courseName: '高级瑜伽进阶',
    buyer: '姓名/手机号码',
    amount: '20 积分'
  }
])

const purchaseTotalCount = ref(2)

// 课程观看记录相关
const watchQuery = reactive({
  viewer: '',
  courseId: undefined,
  page: 1,
  pageSize: 10
})

const watchRecords = ref([
  {
    id: 1,
    viewer: '姓名/手机号码',
    lastWatchTime: '2024-04-01 15:30:22',
    courseName: '瑜伽初级课程',
    amount: '10 积分'
  },
  {
    id: 2,
    viewer: '姓名/手机号码',
    lastWatchTime: '2024-04-02 09:45:10',
    courseName: '高级瑜伽进阶',
    amount: '20 积分'
  }
])

const watchTotalCount = ref(2)

// 观看详情相关
const watchDetailVisible = ref(false)
const currentWatchRecord = ref(null)
const watchDetailRecords = ref([
  {
    courseName: '瑜伽初级课程',
    time: '第1节',
    watchDuration: '2分17秒',
    watchCount: 3,
    lastWatchTime: '2024-04-01 15:30:22'
  },{
    courseName: '瑜伽初级课程',
    time: '第1节',
    watchDuration: '2分17秒',
    watchCount: 3,
    lastWatchTime: '2024-04-01 15:30:22'
  },{
    courseName: '瑜伽初级课程',
    time: '第1节',
    watchDuration: '2分17秒',
    watchCount: 3,
    lastWatchTime: '2024-04-01 15:30:22'
  }
])

// 查询付费购买记录
const searchPurchaseRecords = () => {
  console.log('查询付费购买记录', purchaseQuery)
  // 实际项目中应该调用API获取数据
  ElMessage.success('查询成功')
}

// 查询课程观看记录
const searchWatchRecords = () => {
  console.log('查询课程观看记录', watchQuery)
  // 实际项目中应该调用API获取数据
  ElMessage.success('查询成功')
}

// 查看观看详情
const viewWatchDetail = (record) => {
  currentWatchRecord.value = record
  watchDetailVisible.value = true

  // 实际项目中应该调用API获取详细观看记录
  console.log('查看观看详情', record)
}
</script>

<style scoped>
.tabs-container {
  background-color: #fff;
  border-radius: 4px;
  overflow: hidden;
}

.tabs-header {
  display: flex;
  border-bottom: 1px solid #e4e7ed;
}

.tab-item {
  padding: 10px 20px;
  cursor: pointer;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  margin-right: 5px;
  margin-bottom: -1px;
  transition: all 0.3s;
}

.tab-item.active {
  color: #409eff;
  border-color: #e4e7ed;
  border-bottom-color: #fff;
  background-color: #fff;
}

.tab-content {
  padding: 20px;
}

.search-bar {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.search-item {
  display: flex;
  align-items: center;
  margin-right: 20px;
  margin-bottom: 10px;
}

.label {
  margin-right: 5px;
  white-space: nowrap;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.watch-detail-header {
  margin-bottom: 15px;
  color: #606266;
  font-size: 14px;
}
</style>
